{% extends "base.html" %}
{% block title %}创建PersistenVolumes页面{% endblock %}
{% block k8s %}layui-nav-itemed{% endblock %}
{% block k8s_pv %}layui-this{% endblock %}
{% block body %}
    <span class="layui-breadcrumb span-float" lay-separator="/">
      <a href="/">首页</a>
      <a href='{% url "k8s:node" %}'>Kubernetes</a>
      <a href='{% url "k8s:pv" %}'>PersistenVolumes</a>
      <a><cite>创建PersistenVolumes</cite></a>
   </span>

    <form class="layui-form layui-form-pane" style="margin-left: 20%;margin-top: 2%;margin-right: 20%" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="volume_name" lay-verify="required" lay-reqtext="名称不能为空！" autocomplete="off"
                       placeholder="请输入PersistenVolumes名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <div class="layui-inline">
                <label class="layui-form-label">访问模式</label>
                <div class="layui-input-block">
                    <input type="radio" name="access_model" value="ReadWriteMany" title="多节点读写" checked="">
                    <input type="radio" name="access_model" value="ReadOnlyMany" title="多节点只读">
                    <input type="radio" name="access_model" value="ReadWriteOnce" title="单节点读写">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">容量</label>
                <div class="layui-input-inline">
                    <input type="text" name="capacity" id="capacity" lay-verify="number"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">GB</div>
            </div>
        </div>

        <div class="layui-form-item" id="volume-select-div">
            <label class="layui-form-label">卷插件</label>
            <div class="layui-input-block">
                <select name="plugins" id="volume-select" lay-filter="volume-select" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <option value="host_path">主机路径</option>
                    <option value="" disabled="disabled">----以下还不可用，后续支持----</option>
                    <option value="nfs" disabled="disabled">NFS共享</option>
                    <option value="ceph" disabled="disabled">Ceph</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="btn" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>

{% endblock %}

{% block js %}
    <script>
        layui.use(['form', 'layer'], function () {
            const form = layui.form;
            const layer = layui.layer;
            // form 选择卷插件处理
            form.on('select(volume-select)', function (data) {
                if (data.value==='host_path'){
                    $('#select-after-context').empty();
                    $('        <div id="select-after-context" class="layui-form-item">\n' +
                        '            <label class="layui-form-label">主机路径</label>\n' +
                        '            <div class="layui-input-block">\n' +
                        '                <input type="text" name="local_dir" lay-verify="required" lay-reqtext="路径不能为空！" autocomplete="off"\n' +
                        '                       placeholder="请输入主机路径，例：/data/dfs01/k8s" class="layui-input ">\n' +
                        '            </div>\n' +
                        '        <div class="layui-form-item" style="margin-top: 15px" >\n' +
                        '            <label class="layui-form-label">卷插件</label>\n' +
                        '            <div class="layui-input-block">\n' +
                        '                <select name="modules" id="volume-select-hostpath" lay-filter="volume-select-hostpath"\n' +
                        '                        lay-verify="required" lay-search="">\n' +
                        '                    <option value="DirectoryOrCreate">一个目录，如果该目录不存在，则自动创建目录</option>\n' +
                        '                    <option value="FileOrCreate">一个文件，如果该文件不存在，则自动创建文件</option>\n' +
                        '                    <option value="Directory">一个现有目录</option>\n' +
                        '                    <option value="File">一个现有文件</option>\n' +
                        '                    <option value="Socket">一个Socket文件</option>\n' +
                        '                    <option value="CharDevice">一个字符设备</option>\n' +
                        '                    <option value="BlockDevice">一个块设备</option>\n' +
                        '                </select>\n' +
                        '            </div>\n' +
                        '        </div>' +
                        '        </div>'
                    ).insertAfter($("#volume-select-div"));
                }else if(data.value==='1'){
                    $('#select-after-context').html("");
                    $("<p id='select-after-context' class='three'>我是同级元素aaa</p>").insertAfter($("#volume-select-div"));
                }
                form.render();
            });

            //提交事件
            form.on('submit(submit)', function (data) {
                data = data.field;
                csrf_token = $('[name="csrfmiddlewaretoken"]').val();
                data['csrfmiddlewaretoken'] = csrf_token;
                $.ajax({
                    url: '{% url "persisten_volumes_api" %}',
                    async: false,
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    //提交成功回调函数
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg(res.msg, {icon: 6});
                            document.location.href = "{% url 'k8s:pv' %}",true;
                        } else {
                            layer.msg('<strong>error code: </strong>' + res.code + ', <strong>error message: </strong>' + res.msg, {icon: 5})
                            window.location.replace('/')
                        }
                    },
                    error: function (res) {
                        layer.msg('服务接口异常', {icon: 5});
                    }
                })
            });

        });
    </script>
{% endblock %}
